<template>
  <div class="authentication-wrapper authentication-3">
    <div class="authentication-inner">

      <!-- Side container -->
      <!-- Do not display the container on extra small, small and medium screens -->
      <div class="d-none d-lg-flex col-lg-8 align-items-center ui-bg-cover ui-bg-overlay-container p-5" 
      :style="{backgroundImage: 'url(' + loginBg + ')'}">
        <div class="ui-bg-overlay opacity-50"></div>

        <!-- 登录页Logo  -->
        <div class="w-100 login-bg-logo-container">
          <img :src="skywaresLogo" alt="" class="login-bg-logo">
        </div>

        <!-- Text -->
        <div class="w-100 text-white px-5">
          <h1 class="display-2 font-weight-bolder mb-4">JOIN OUR<br>COMMUNITY</h1>
          <div class="text-large font-weight-light">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula ex eu gravida faucibus. Suspendisse viverra pharetra purus. Proin fringilla ac lorem at sagittis. Proin tincidunt dui et nunc ultricies dignissim.
          </div>
        </div>
        <!-- /.Text -->

        <!-- 登录页标识  -->
        <div class="w-100 text-white login-tips-container">
          <img :src="loginIcon" alt="" class="mr-2 login-tips-logo"/>
          <span class="login-tips-text">智能风控后台管理</span>
        </div>
      </div>

      <!-- / Side container -->

      <!-- Form container -->
      <div class="d-flex col-lg-4 align-items-center bg-white p-5">
        <!-- Inner container -->
        <!-- Have to add `.d-flex` to control width via `.col-*` classes -->
        <div class="d-flex col-sm-7 col-md-5 col-lg-12 px-0 px-xl-4 mx-auto">
          <div class="w-100">

            <!-- Logo -->
            <div class="d-flex justify-content-center align-items-center">
              <div class="ui-w-60">
                <div class="w-100 position-relative">
                  <!-- <svg class="w-100 h-100 position-absolute" viewBox="0 0 148 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="46.49" x2="62.46" y1="53.39" y2="48.2" gradientUnits="userSpaceOnUse"><stop stop-opacity=".25" offset="0"></stop><stop stop-opacity=".1" offset=".3"></stop><stop stop-opacity="0" offset=".9"></stop></linearGradient><linearGradient id="e" x1="76.9" x2="92.64" y1="26.38" y2="31.49" xlink:href="#a"></linearGradient><linearGradient id="d" x1="107.12" x2="122.74" y1="53.41" y2="48.33" xlink:href="#a"></linearGradient></defs><path class="fill-primary" transform="translate(-.1)" d="M121.36,0,104.42,45.08,88.71,3.28A5.09,5.09,0,0,0,83.93,0H64.27A5.09,5.09,0,0,0,59.5,3.28L43.79,45.08,26.85,0H.1L29.43,76.74A5.09,5.09,0,0,0,34.19,80H53.39a5.09,5.09,0,0,0,4.77-3.26L74.1,35l16,41.74A5.09,5.09,0,0,0,94.82,80h18.95a5.09,5.09,0,0,0,4.76-3.24L148.1,0Z"></path><path transform="translate(-.1)" d="M52.19,22.73l-8.4,22.35L56.51,78.94a5,5,0,0,0,1.64-2.19l7.34-19.2Z" fill="url(#a)"></path><path transform="translate(-.1)" d="M95.73,22l-7-18.69a5,5,0,0,0-1.64-2.21L74.1,35l8.33,21.79Z" fill="url(#e)"></path><path transform="translate(-.1)" d="M112.73,23l-8.31,22.12,12.66,33.7a5,5,0,0,0,1.45-2l7.3-18.93Z" fill="url(#d)"></path></svg> -->
                  <img :src="loginLogo" width="48"/>
                </div>
              </div>
            </div>
            <!-- / Logo -->

            <h4 class="text-center text-lighter font-weight-normal mb-0" style="font-size:18px;letter-spacing:8px;margin-top:40px;">智能风控系统</h4>

            <!-- Form -->
            <form class="my-5">
              <b-form-group label="登录账号">
                <b-input v-model="credentials.userId" />
              </b-form-group>
              <b-form-group>
                <div slot="label" class="d-flex justify-content-between align-items-end">
                  <div>登录密码</div>
                  <a href="javascript:void(0)" class="d-block small">忘记密码?</a>
                </div>
                <b-input type="password" v-model="credentials.pwd" />
              </b-form-group>

              <div class="d-flex justify-content-between align-items-center m-0">
                <b-check v-model="credentials.rememberMe" class="m-0">记住我</b-check>
                <b-btn variant="primary" @click="login()">登录</b-btn>
              </div>
            </form>
            <!-- / Form -->

            <div class="text-center text-muted">
              还没有账号? <a href="javascript:void(0)">点击注册</a>
            </div>

          </div>
        </div>
      </div>
      <!-- / Form container -->

    </div>
  </div>
</template>

<!-- Page -->
<style src="@/vendor/styles/pages/authentication.scss" lang="scss"></style>
<style scoped>
.login-tips-container{
  position: absolute;
  bottom: 40px;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.login-tips-logo{
  display: inline-block;
  width: 22px;
  height: 22px;
}
.login-tips-text{
  font-size:18px;
}

.login-bg-logo-container{
  position:absolute;
  top: 20px;
}
.login-bg-logo{
  height: 42px;
}
</style>


<script>
import Axios from 'axios'
import { mapMutations } from 'vuex'


export default {
  name: 'pages-authentication-login-v3',
  metaInfo: {
    title: 'Login v3 - Pages'
  },
  data: () => ({
    credentials: {
      orgId: '100',
      userId: 'admin',
      pwd: 'admin1234'
    },
    loginBg: require('@/../static/img/bg/login-bg.png'),
    skywaresLogo : require('@/../static/img/skywares/skywares-logo.png'),
    loginLogo: require('@/../static/img/bg/login-logo.png'),
    loginIcon: require('@/../static/img/bg/login-icon.png')
  }),
  methods: {
        ...mapMutations([
          'setUserName'
        ]),
        login: function() {
            let self = this;
            let url = "/app/v1/sys/login?platformType=admin";
            let params = self.credentials;
          
            Axios.post(url, params, {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(function (res) {
                if(res.code == 0){
                    // location.href = "/dashboards/home";
                    self.setUserName(res.data.userId);
                    self.$router.push('/dashboards/home');
                }else {
                    self.$Message.error({
                      title: '系统提示',
                      desc: res.desc
                    });
                }
            }, function (err) {
                self.$Message.error({
                  title: '系统提示',
                  desc: err.desc
                });
            }).catch(function (err) {
                console.log(err)
            });
        }
  }
}
</script>
